<template>
	<gui-popup :zIndex="1000" ref="timePopup" position="bottom">
		<view class="gui-bg-white gui-padding gui-text-center gui-text gui-border-b">
			选择时间
		</view>
		<view class="gui-bg-gray">
			<view class="gui-bg-white gui-padding">
				<gui-switch-navigation :titleClass="['gui-primary-text']"
					:activeLineClass="['gui-nav-scale','gui-gtbg-blue', 'gui-gtbg-black']" isCenter :items="dates"
					:size="200" activeLineWidth="160rpx" activeDirection="center" textAlign="center"
					:currentIndex="dateIndex" @change="datechange" style="width: 100%">
				</gui-switch-navigation>
			</view>

			<view class="gui-bg-gray gui-flex gui-wrap">
				<view v-for="(item,index) in times" :key="index" style="flex:0 0 33%"
					class="gui-flex gui-justify-content-center">
					<view @tap="timeSelect(index)"
						:class="timeIndex == index?['gui-bg-blue','gui-color-white']:['gui-bg-white']"
						class="gui-text-center gui-padding-small gui-border-radius-large  gui-margin-top">
						<view class="gui-text-small" :class="item.times == 0?['gui-color-gray']:[]">
							{{item.start}}-{{item.end}}
						</view>
						<view class="gui-text-small gui-margin-top-small"
							:class="timeIndex == index?['gui-color-white']:item.times==0?['gui-color-gray']:['gui-color-blue']">
							剩余{{item.times}}次
						</view>
					</view>
				</view>
                
			</view>
                <view v-if="this.$store.state.base.show_base.xzsj_ts" class="gui-text-small gui-margin gui-color-gray ">
                	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.$store.state.base.show_base.xzsj_ts}}</view>

			<view class="gui-padding gui-margin-top">
				<button type="default" class="gui-button gui-bg-blue gui-noborder" @tap.prevent="comfirDate"
					style="border-radius:50rpx;">
					<text class="gui-color-white gui-button-text">确定</text>
				</button>
			</view>
		</view>
		<!-- iphone 底部适配 -->
		<gui-iphone-bottom :customClass="['gui-bg-white', 'gui-dark-bg-level-3']"></gui-iphone-bottom>
	</gui-popup>
</template>

<script>
	import moment from 'moment';
	export default {
		name: "hyb-fuwu-time",
		props: {
			type: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				dateIndex: 0,
				timeIndex: -1,
				times: [],
				dates: [],
				x_id: 0
			};
		},
		methods: {
			comfirDate() {
				if (this.timeIndex == -1) {
					uni.showToast({
						title: "请选择服务时间",
						icon: 'none'
					})
				} else {
					let fa_fwtime = this.dates[this.dateIndex].id + " " + this.times[this.timeIndex].start +
						"-" + this.times[this.timeIndex].end;
					this.$refs.timePopup.close();
					this.$emit("change", fa_fwtime)
				}
			},
			getDay(day) {
				return ['日', '一', '二', '三', '四', '五', '六'][day];
			},

			timeSelect(index) {
				if (this.times[index].times > 0) {
					this.timeIndex = index;
				} else {
					uni.showToast({
						title: "已订完!",
						icon: 'none'
					})
				}
			},
			datechange(e) {
				this.dateIndex = e;
				this.timeIndex = -1;

				uni.gPost("fuwu/times", {
					tag: "fadan",
					x_id: this.x_id,
					date: this.dates[this.dateIndex].id
				}).then((times) => {
					this.times = times;
				})
			},
			popup(x_id) {
				this.x_id = x_id;
				if (this.dates.length == 0) {
					let date = null;
					for (let i = 0; i < 30; i++) {
						date = moment().add(i, 'days');
						this.dates.push({
							id: date.format("YYYY-MM-DD"),
							name: "星期" + this.getDay(date.day()) + "\n" + date.format("YYYY-MM-DD")
						});
					}
					this.datechange(0);
				}
				console.log(this.dates);
				this.$refs.timePopup.open();
			},
		}
	}
</script>

<style>
</style>
